import React, { Component } from 'react';
import {catagory_list,catagory_subcate} from '../api/cate'
import InputBox from '../components/InputBox';
import '../styles/Cate.css'
class Cate extends Component {
    
    constructor(props){
        super(props);
        this.state={
            catelist:[],
            subcate:{},
            currentIndex:0
        }
    }
    componentDidMount(){
        catagory_list().then((res)=>{
            this.setState({
                catelist:res.data.list
            })
        })
    }
    handleIndex(index){
        this.setState({//保存下标并触发组件更新
            currentIndex:index
        })
        //请求二三级分类
        catagory_subcate({id:this.state.catelist[index].id}).then((res)=>{
            console.log(res.data);
            this.setState({
                subcate:res.data.subcate
            })
        })
    }
    render() {
        return (
            
            <div className='cate'>
                {/* 左侧一级分类 */}
                <div className='top'><input type="text" placeholder='搜索商品'/></div>
                <div className="tableft">
                    {
                        this.state.catelist.map((item,index)=>{
                            return (
                                <div className={`tab ${ this.state.currentIndex == index?'active':''}`} onClick={()=>{this.handleIndex(index)}} key={index}>{item.name}</div>
                            )
                        })
                    }
                </div>
                {/* 右侧二级分类 */}
                <div className="tabright">
                    {
                        this.state.subcate.subcategory &&
                        this.state.subcate.subcategory.map((item2,index)=>{
                            return (
                                <div className="subcate" key={index}>
                                        <div className="title">{item2.name}</div>
                                        <div className="list">
                                            {
                                                //渲染三级分类列表
                                                item2.subNavs&&
                                                item2.subNavs.map((item3,index)=>{
                                                    return (
                                                        <div className="nav" key={index}>
                                                            <img src={item3.pic} alt="" />
                                                            <div>{item3.name}</div>
                                                        </div>
                                                    )
                                                })
                                            }
                                        </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default Cate;
